<template>
  <div>
    <div style="margin-bottom: 15px">
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-select v-model="searchList.search" placeholder="请选择" size="mini" style="width: 150px;" height="250">
              <el-option v-for="item in searchs" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchList.search_status" placeholder="请选择状态" size="mini" style="width: 150px;"
                       height="250">
              <el-option v-for="item in searching" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input :disabled="isdis" clearable placeholder="请输入内容" size="mini"
                      v-model="searchList.searchValue"></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="searchList.date"
              type="date"
              size="mini"
              value-format="timestamp"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="getTaskInfoList">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog title="评论模版" :visible.sync="dialogFormVisible">
        <el-form :model="evaluation" :rules="rulesLld" ref="evaluation">
          <el-form-item label="订单编号" prop="baby_id" :label-width="formLabelWidth">
            <el-input v-model="evaluation.order_num" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="评语内容" prop="title" :label-width="formLabelWidth">
            <el-input v-model="evaluation.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="评语图片" :label-width="formLabelWidth">
            <!--:before-upload="beforeAvatarUpload"-->
            <el-upload
              action="/api/va/evaluate/evaluate_img"
              list-type="picture-card"
              :headers="importHeaders"
              :file-list="fileList"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <div style="text-align: right">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit('evaluation')">确 定</el-button>
          </div>
        </el-form>
      </el-dialog>
    </div>
    <el-table v-loading="loading" border :data="tableData" style="width: 100%" header-align="center">
      <el-table-column label="序号" type="index" align="center" width=""></el-table-column>
      <el-table-column prop="task_order" label="订单号" align="center" width=""></el-table-column>
      <el-table-column prop="task_shopname" label="店铺名" align="center" width="100px"></el-table-column>
      <el-table-column prop="goods_img" label="商品图片" width="" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.goods_img" style="width:100px;height:100px;" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="brushhands_tbname" label="多多号号" width="" align="center"></el-table-column>
      <el-table-column prop="task_bjmoney" label="本金" width="" align="center"></el-table-column>
      <el-table-column prop="brushhands_group" label="组别" width="" align="center"></el-table-column>
      <el-table-column prop="title" label="评论状态" align="center">
        <template slot-scope="scope">
          {{['','待评价','评价完成','评价提交等待审核','全部评价'][scope.row.pj_status]}}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="评论内容" align="center"></el-table-column>
      <el-table-column prop="create_time" label="订单创建时间" align="center" width="100">
        <template slot-scope="scope">
          {{scope.row.create_time | moment}}
        </template>
      </el-table-column>
      <el-table-column prop="imgs" label="评论图片" align="center">
        <template slot-scope="props">
          <div style="width:100%;display:flex;">
            <viewer>
              <img v-for="i in props.row.imgs" :src="i" alt="" style="width: 50px;">
            </viewer>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="imgs" label="上传评价" align="center">
        <template slot-scope="props">
          <el-button type="primary"
                     v-if="props.row.title == '' && props.row.imgs.length==0 && props.row.pj_status !=3"
                     @click="dialogFormVisible = true;brushhands_openid = props.row;evaluation.order_num = props.row.task_order">
            上传评价
          </el-button>
          <el-button type="danger" v-if="props.row.pj_status !=2 && props.row.title != '' && props.row.imgs.length>=0"
                     @click="dialogFormVisible = true;brushhands_openid = props.row;evaluation.order_num = props.row.task_order">
            修改评价
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :page-size="10" :current-page="searchList.pn" layout="total,prev, pager, next"
                   :total="searchList.total" @current-change="pnChange">
    </el-pagination>
  </div>
</template>

<script>
  import {evaluate, evaluate_list} from '../../api/api'
  export default {
    name: "AdminRefundList",
    data() {
      return {
        //携带token
        importHeaders: {token: JSON.parse(sessionStorage.getItem('token'))},
        //图片信息
        evaluation: {
          baby_id: '',
          title: '',
          dialogImageUrl: [],
        },
        fileList: [],
        brushhands_openid: "",
        value1: "",
        isdis: false,
        dialogVisible: false,
        //弹出层
        searching: [
          {
            value: '1',
            label: "待评价"
          },
          {
            value: '2',
            label: "评价完成"
          },
          {
            value: '3',
            label: "评价提交等待审"
          },
          {
            value: '4',
            label: "全部评价"
          },
        ],
        dialogFormVisible: false,
        tableData: [],
        searchs: [
          {
            value: '全部',
            label: "全部"
          },
          {
            value: 'order',
            label: "订单号"
          },
          {
            value: 'babyid',
            label: "宝贝ID"
          },
          {
            value: 'status',
            label: "状态"
          },
          {
            value: 'wwname',
            label: "多多号号"
          },
        ],
        searchList: {
          search: '',
          searchValue: "",
          timelist: [],
          pn: 1,
          search_status: "",
          status: "",
          date: "",
          total: 0
        },
        loading: false,
        formLabelWidth: '120px',
        rulesLld: {
          order_num: [
            {required: true, message: '请输入订单编号', trigger: 'blur'},
          ],
          title: [
            {required: true, message: '请输入评语', trigger: 'change'}
          ],
          dialogImageUrl: [
            {required: true, message: '请上传评语图片', trigger: 'change'}
          ],
        }
      }
    },
    mounted() {
      let params = {
        page: this.searchList.pn,
        type: 1,
        pagesize: 10,
      }
      this.getorderList(params)
    },
    methods: {
      pnChange(pn) {
        this.searchList.pn = pn
        let params = {
          page: pn,
          page_size: 10,
        }
        this.getorderList(params)
      },
      //图片上传
      handleAvatarSuccess(res, file) {
        this.evaluation.dialogImageUrl.push(res.UrlImg);
        console.log(this.evaluation.dialogImageUrl, 'success');
      },
      handleRemove(file, fileList) {
        Array.prototype.indexOf = function (val) {
          for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
          }
          return -1;
        };
        Array.prototype.remove = function (val) {
          var index = this.indexOf(val);
          if (index > -1) {
            this.splice(index, 1);
          }
        };
        this.evaluation.dialogImageUrl.remove(file.response.UrlImg)
      },
      getTaskInfoList() {
        let _this = this
        if (_this.searchList.search.toString() == 'status') {
          _this.searchList.searchValue = _this.searchList.search_status
        }
        var searchListParams = {
          status: _this.searchList.status,
          wherek: _this.searchList.search.toString(),
          wherev: _this.searchList.searchValue,
          pagesize: 10,
          page: _this.searchList.pn,
          TimeStr: _this.searchList.date,
        }
        evaluate_list(searchListParams).then(res => {
          _this.loading = false
          if (res.Status == 200) {
            _this.searchList.total = res.Count
            _this.tableData = res.Data.map((img) => {
              if (img.imgs != '') {
                img.imgs = JSON.parse(img.imgs)
                return img;
              } else {
                return img;
              }
            })
            console.log(_this.tableData);
          } else {
            this.$message.error(res.Message)
          }
          console.log('this.tableData', this.tableData)
        })
      },
      //获取订单列表
      getorderList(params) {
        evaluate_list(params).then(res => {
          if (res.Status == 200) {
            console.log(res.Data);
            this.searchList.total = res.Count
            this.tableData = res.Data.map((item) => {
              if (item.imgs != '') {
                item.imgs = JSON.parse(item.imgs)
              } else {
                return item
              }
              return item;
            })
          } else {
            this.$message.error(res.Message)
          }
        })
      },
      submit(formName) {
        this.$confirm("请您确定物流已到达，以防止提前收货！", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              evaluate({
                order_num: this.evaluation.order_num,
                title: this.evaluation.title,
                pj_img: JSON.stringify(this.evaluation.dialogImageUrl),
                omessage: this.brushhands_openid.brushhands_openid
              }).then(res => {
                if (res.Status == 200) {
                  this.$message.success(res.Message)
                  let params = {
                    page: this.searchList.pn,
                    page_size: 10,
                  }
                  this.getorderList(params)
                  this.evaluation.order_num = this.evaluation.title = ''
                  this.evaluation.dialogImageUrl = []
                  this.fileList = []
                  this.dialogFormVisible = false
                } else {
                  this.$message.error(res.Message)
                }
              })
            } else {
              return false;
            }
          });
        })
      },
    }
  }
</script>

<style>

</style>
